<div class="container">
      
            
            <div class="hero-unit">
            <h1>已开六合彩列表</h1>
            Invoice Header
            <table id="list10"></table>
            <div id="pager10"></div>
            <br />
            Invoice Detail
            <table id="list10_d"></table>
            <div id="pager10_d"></div>
            <a href="javascript:void(0)" id="ms1">Get Selected id's</a>
          </div>
            
</div><!--/row-->


<script>
jQuery("#list10").jqGrid({
   	url:'__URL__/getPeriodList',
	datatype: "json",
   	colNames:['ID','Period Id', 'Result', 'create_time','update_time','number'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'period_id',index:'period_id', width:90},
   		{name:'result',index:'result', width:100},
   		{name:'create_time',index:'create_time', width:80, align:"right"},
   		{name:'update_time',index:'update_time', width:80, align:"right"},		
   		{name:'number',index:'number', width:80,align:"right"},		
   	],
   	rowNum:10,
   	rowList:[10,20,30],
   	pager: '#pager10',
   	sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
	multiselect: false,
	caption: "Invoice Header",
	onSelectRow: function(ids) {
		if(ids == null) {
			ids=0;
			if(jQuery("#list10_d").jqGrid('getGridParam','records') >0 )
			{
				jQuery("#list10_d").jqGrid('setGridParam',{url:"__URL__/getOrderList/id/"+ids,page:1});
				jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids)
				.trigger('reloadGrid');
			}
		} else {
			jQuery("#list10_d").jqGrid('setGridParam',{url:"__URL__/getOrderList/id/"+ids,page:1});
			jQuery("#list10_d").jqGrid('setCaption',"Invoice Detail: "+ids)
			.trigger('reloadGrid');			
		}
	}
});
jQuery("#list10").jqGrid('navGrid','#pager10',{add:false,edit:false,del:false});
jQuery("#list10_d").jqGrid({
	height: 100,
   	url:'__URL__/getOrderList/id/0',
	datatype: "json",
   	colNames:['No','Period Id', 'All Json', 'Label','Result'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'period_id',index:'period_id', width:180},
   		{name:'all_json',index:'all_json', width:80, align:"right"},
   		{name:'label',index:'label', width:80, align:"right"},		
   		{name:'result',index:'result', width:80,align:"right", sortable:false, search:false}
   	],
   	rowNum:5,
   	rowList:[5,10,20],
   	pager: '#pager10_d',
   	sortname: 'item',
    viewrecords: true,
    sortorder: "asc",
	multiselect: true,
	caption:"Invoice Detail"
}).navGrid('#pager10_d',{add:false,edit:false,del:false});
jQuery("#ms1").click( function() {
	var s;
	s = jQuery("#list10_d").jqGrid('getGridParam','selarrrow');
	alert(s);
});
    
</script>